<script setup>
import { User, House, Calendar } from '@element-plus/icons-vue'
import { ref } from 'vue'
let drawer = ref(false)
</script>

<template>
  <el-row class="header">
    <el-col :span="8">
      <el-icon @click="drawer = true">
        <User></User>
      </el-icon>
    </el-col>
    <el-col :span="8">
      <router-link to="/seat" class="link">
        <el-icon>
          <House></House>
        </el-icon>
      </router-link>

    </el-col>
    <el-col :span="8">
      <router-link to="/reservation" class="link">
        <el-icon>
          <Calendar></Calendar>
        </el-icon>
      </router-link>
    </el-col>
  </el-row>

  <el-drawer v-model="drawer" direction="ltr" size="60%" :with-header="false">
    <template #default>
      <user-info />
    </template>
    <template #footer>
      <edit-user></edit-user>
    </template>
  </el-drawer>
</template>

<style scoped>
.header {
  background-color: #6779ff;
  color: #fff;
  height: 60px;
  width: 100%;
  line-height: 60px;
  font-size: 30px;
  text-align: center;
}

.link {
  /* 在这里添加覆盖默认样式的属性 */
  color: #fff;
  text-decoration: underline;
}

.router-link-active {
  border-bottom: 2px solid #fff;
}
</style>
